<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业级全栈后台管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
        .gradient-bg { background: linear-gradient(135deg, #1e40af 0%, #06b6d4 100%); }
        .card-shadow { box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .hover-scale { transition: transform 0.2s; }
        .hover-scale:hover { transform: scale(1.02); }
    </style>
</head>
<body class="bg-gray-50">
    <div id="root"></div>
    
    <script type="text/babel">
        const { useState, useEffect } = React;
        
        // 主应用组件
        function App() {
            const [currentPage, setCurrentPage] = useState('dashboard');
            const [user, setUser] = useState(null);
            
            // 模拟登录状态
            useEffect(() => {
                const token = localStorage.getItem('token');
                if (token) {
                    setUser({ name: '系统管理员', role: 'admin' });
                }
            }, []);
            
            if (!user) {
                return <LoginPage onLogin={setUser} />;
            }
            
            return (
                <div className="min-h-screen bg-gray-50">
                    <Header user={user} onLogout={() => setUser(null)} />
                    <div className="flex">
                        <Sidebar currentPage={currentPage} onPageChange={setCurrentPage} />
                        <MainContent currentPage={currentPage} />
                    </div>
                </div>
            );
        }
        
        // 登录页面组件
        function LoginPage({ onLogin }) {
            const [formData, setFormData] = useState({ username: '', password: '' });
            const [loading, setLoading] = useState(false);
            
            const handleSubmit = (e) => {
                e.preventDefault();
                setLoading(true);
                
                setTimeout(() => {
                    if (formData.username === 'admin' && formData.password === '123456') {
                        localStorage.setItem('token', 'demo-token');
                        onLogin({ name: '系统管理员', role: 'admin' });
                    } else {
                        alert('用户名或密码错误！请使用 admin/123456');
                    }
                    setLoading(false);
                }, 1000);
            };
            
            return (
                <div className="min-h-screen gradient-bg flex items-center justify-center p-4">
                    <div className="bg-white rounded-2xl card-shadow p-8 w-full max-w-md">
                        <div className="text-center mb-8">
                            <h1 className="text-3xl font-bold text-gray-800 mb-2">企业管理系统</h1>
                            <p className="text-gray-600">请登录您的账户</p>
                        </div>
                        
                        <form onSubmit={handleSubmit} className="space-y-6">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                                <input
                                    type="text"
                                    value={formData.username}
                                    onChange={(e) => setFormData({...formData, username: e.target.value})}
                                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    placeholder="请输入用户名"
                                    required
                                />
                            </div>
                            
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-2">密码</label>
                                <input
                                    type="password"
                                    value={formData.password}
                                    onChange={(e) => setFormData({...formData, password: e.target.value})}
                                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    placeholder="请输入密码"
                                    required
                                />
                            </div>
                            
                            <button
                                type="submit"
                                disabled={loading}
                                className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors disabled:opacity-50"
                            >
                                {loading ? '登录中...' : '登录'}
                            </button>
                        </form>
                        
                        <div className="mt-6 p-4 bg-blue-50 rounded-lg">
                            <p className="text-sm text-blue-800">
                                <strong>演示账号：</strong><br/>
                                用户名: admin<br/>
                                密码: 123456
                            </p>
                        </div>
                    </div>
                </div>
            );
        }
        
        // 头部组件
        function Header({ user, onLogout }) {
            return (
                <header className="bg-white shadow-sm border-b border-gray-200">
                    <div className="px-6 py-4 flex justify-between items-center">
                        <h1 className="text-xl font-semibold text-gray-800">企业级后台管理系统</h1>
                        <div className="flex items-center space-x-4">
                            <span className="text-gray-600">欢迎，{user.name}</span>
                            <button
                                onClick={onLogout}
                                className="text-red-600 hover:text-red-800 transition-colors"
                            >
                                退出登录
                            </button>
                        </div>
                    </div>
                </header>
            );
        }
        
        // 侧边栏组件
        function Sidebar({ currentPage, onPageChange }) {
            const menuItems = [
                { id: 'dashboard', name: '控制台', icon: '📊' },
                { id: 'chat', name: '智能聊天', icon: '💬' },
                { id: 'release', name: '版本发布', icon: '🚀' },
                { id: 'analytics', name: '数据分析', icon: '📈' },
                { id: 'users', name: '用户管理', icon: '👥' }
            ];
            
            return (
                <aside className="w-64 bg-white shadow-sm border-r border-gray-200 min-h-screen">
                    <nav className="p-4">
                        <ul className="space-y-2">
                            {menuItems.map(item => (
                                <li key={item.id}>
                                    <button
                                        onClick={() => onPageChange(item.id)}
                                        className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${
                                            currentPage === item.id 
                                                ? 'bg-blue-50 text-blue-700 border-l-4 border-blue-700' 
                                                : 'text-gray-600 hover:bg-gray-50'
                                        }`}
                                    >
                                        <span className="text-xl">{item.icon}</span>
                                        <span className="font-medium">{item.name}</span>
                                    </button>
                                </li>
                            ))}
                        </ul>
                    </nav>
                </aside>
            );
        }
        
        // 主内容区组件
        function MainContent({ currentPage }) {
            const renderPage = () => {
                switch(currentPage) {
                    case 'dashboard':
                        return <DashboardPage />;
                    case 'chat':
                        return <ChatPage />;
                    case 'release':
                        return <ReleasePage />;
                    case 'analytics':
                        return <AnalyticsPage />;
                    case 'users':
                        return <UsersPage />;
                    default:
                        return <DashboardPage />;
                }
            };
            
            return (
                <main className="flex-1 p-6">
                    {renderPage()}
                </main>
            );
        }
        
        // 控制台页面
        function DashboardPage() {
            const stats = [
                { title: '总用户数', value: '1,234', change: '+12%', color: 'blue' },
                { title: '活跃会话', value: '89', change: '+5%', color: 'green' },
                { title: '版本发布', value: '23', change: '+8%', color: 'purple' },
                { title: '系统健康度', value: '99.9%', change: '+0.1%', color: 'cyan' }
            ];
            
            return (
                <div>
                    <h2 className="text-2xl font-bold text-gray-800 mb-6">控制台概览</h2>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        {stats.map((stat, index) => (
                            <div key={index} className="bg-white rounded-xl card-shadow p-6 hover-scale">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <p className="text-gray-600 text-sm">{stat.title}</p>
                                        <p className="text-2xl font-bold text-gray-800 mt-1">{stat.value}</p>
                                        <p className={`text-sm mt-1 text-${stat.color}-600`}>{stat.change}</p>
                                    </div>
                                    <div className={`w-12 h-12 bg-${stat.color}-100 rounded-lg flex items-center justify-center`}>
                                        <div className={`w-6 h-6 bg-${stat.color}-500 rounded`}></div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                    
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div className="bg-white rounded-xl card-shadow p-6">
                            <h3 className="text-lg font-semibold text-gray-800 mb-4">最近活动</h3>
                            <div className="space-y-4">
                                <div className="flex items-center space-x-3">
                                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                                    <span className="text-gray-600">用户 admin 登录系统</span>
                                    <span className="text-gray-400 text-sm ml-auto">刚刚</span>
                                </div>
                                <div className="flex items-center space-x-3">
                                    <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                                    <span className="text-gray-600">版本 v1.2.0 发布成功</span>
                                    <span className="text-gray-400 text-sm ml-auto">5分钟前</span>
                                </div>
                                <div className="flex items-center space-x-3">
                                    <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                                    <span className="text-gray-600">新增聊天会话 3 个</span>
                                    <span className="text-gray-400 text-sm ml-auto">10分钟前</span>
                                </div>
                            </div>
                        </div>
                        
                        <div className="bg-white rounded-xl card-shadow p-6">
                            <h3 className="text-lg font-semibold text-gray-800 mb-4">系统状态</h3>
                            <div className="space-y-4">
                                <div className="flex justify-between items-center">
                                    <span className="text-gray-600">CPU使用率</span>
                                    <div className="flex items-center space-x-2">
                                        <div className="w-24 h-2 bg-gray-200 rounded-full">
                                            <div className="w-1/4 h-2 bg-green-500 rounded-full"></div>
                                        </div>
                                        <span className="text-sm text-gray-500">25%</span>
                                    </div>
                                </div>
                                <div className="flex justify-between items-center">
                                    <span className="text-gray-600">内存使用率</span>
                                    <div className="flex items-center space-x-2">
                                        <div className="w-24 h-2 bg-gray-200 rounded-full">
                                            <div className="w-1/2 h-2 bg-blue-500 rounded-full"></div>
                                        </div>
                                        <span className="text-sm text-gray-500">50%</span>
                                    </div>
                                </div>
                                <div className="flex justify-between items-center">
                                    <span className="text-gray-600">磁盘使用率</span>
                                    <div className="flex items-center space-x-2">
                                        <div className="w-24 h-2 bg-gray-200 rounded-full">
                                            <div className="w-1/3 h-2 bg-yellow-500 rounded-full"></div>
                                        </div>
                                        <span className="text-sm text-gray-500">33%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
        
        // 智能聊天页面
        function ChatPage() {
            const [messages, setMessages] = useState([
                { id: 1, type: 'bot', content: '您好！我是智能助手，有什么可以帮助您的吗？', time: '10:00' },
                { id: 2, type: 'user', content: '请介绍一下这个系统的主要功能', time: '10:01' },
                { id: 3, type: 'bot', content: '这是一个企业级全栈后台管理系统，主要功能包括：\n1. 用户认证与权限管理\n2. 智能聊天集成\n3. 版本发布管理\n4. 用户行为分析\n5. 数据可视化看板', time: '10:01' }
            ]);
            const [inputValue, setInputValue] = useState('');
            
            const handleSend = () => {
                if (!inputValue.trim()) return;
                
                const newMessage = {
                    id: messages.length + 1,
                    type: 'user',
                    content: inputValue,
                    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
                };
                
                setMessages([...messages, newMessage]);
                setInputValue('');
                
                // 模拟AI回复
                setTimeout(() => {
                    const botReply = {
                        id: messages.length + 2,
                        type: 'bot',
                        content: '感谢您的提问！这是一个演示回复。在实际应用中，这里会连接到Dify API或其他AI服务来提供智能回复。',
                        time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
                    };
                    setMessages(prev => [...prev, botReply]);
                }, 1000);
            };
            
            return (
                <div>
                    <h2 className="text-2xl font-bold text-gray-800 mb-6">智能聊天</h2>
                    
                    <div className="bg-white rounded-xl card-shadow h-96 flex flex-col">
                        <div className="flex-1 p-4 overflow-y-auto">
                            <div className="space-y-4">
                                {messages.map(message => (
                                    <div key={message.id} className={`flex ${message.type === 'user' ? 'justify-end' : 'justify-start'}`}>
                                        <div className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
                                            message.type === 'user' 
                                                ? 'bg-blue-500 text-white' 
                                                : 'bg-gray-100 text-gray-800'
                                        }`}>
                                            <p className="whitespace-pre-line">{message.content}</p>
                                            <p className={`text-xs mt-1 ${message.type === 'user' ? 'text-blue-100' : 'text-gray-500'}`}>
                                                {message.time}
                                            </p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                        
                        <div className="border-t border-gray-200 p-4">
                            <div className="flex space-x-2">
                                <input
                                    type="text"
                                    value={inputValue}
                                    onChange={(e) => setInputValue(e.target.value)}
                                    onKeyPress={(e) => e.key === 'Enter' && handleSend()}
                                    placeholder="输入您的消息..."
                                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                />
                                <button
                                    onClick={handleSend}
                                    className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                                >
                                    发送
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
        
        // 版本发布页面
        function ReleasePage() {
            const releases = [
                { version: 'v1.2.0', status: '已发布', date: '2024-01-15', description: '新增智能聊天功能' },
                { version: 'v1.1.0', status: '已发布', date: '2024-01-10', description: '优化用户界面' },
                { version: 'v1.0.0', status: '已发布', date: '2024-01-01', description: '系统初始版本' }
            ];
            
            return (
                <div>
                    <div className="flex justify-between items-center mb-6">
                        <h2 className="text-2xl font-bold text-gray-800">版本发布管理</h2>
                        <button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                            新建发布
                        </button>
                    </div>
                    
                    <div className="bg-white rounded-xl card-shadow overflow-hidden">
                        <table className="w-full">
                            <thead className="bg-gray-50">
                                <tr>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">版本号</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布日期</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody className="bg-white divide-y divide-gray-200">
                                {releases.map((release, index) => (
                                    <tr key={index}>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                            {release.version}
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap">
                                            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                {release.status}
                                            </span>
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {release.date}
                                        </td>
                                        <td className="px-6 py-4 text-sm text-gray-500">
                                            {release.description}
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button className="text-blue-600 hover:text-blue-900 mr-3">查看</button>
                                            <button className="text-red-600 hover:text-red-900">回滚</button>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            );
        }
        
        // 数据分析页面
        function AnalyticsPage() {
            return (
                <div>
                    <h2 className="text-2xl font-bold text-gray-800 mb-6">数据分析</h2>
                    
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div className="bg-white rounded-xl card-shadow p-6">
                            <h3 className="text-lg font-semibold text-gray-800 mb-4">用户访问趋势</h3>
                            <div className="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
                                <p className="text-gray-500">📈 图表数据可视化区域</p>
                            </div>
                        </div>
                        
                        <div className="bg-white rounded-xl card-shadow p-6">
                            <h3 className="text-lg font-semibold text-gray-800 mb-4">功能使用统计</h3>
                            <div className="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
                                <p className="text-gray-500">🍩 饼图数据展示区域</p>
                            </div>
                        </div>
                        
                        <div className="bg-white rounded-xl card-shadow p-6">
                            <h3 className="text-lg font-semibold text-gray-800 mb-4">系统性能监控</h3>
                            <div className="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
                                <p className="text-gray-500">📊 性能指标图表区域</p>
                            </div>
                        </div>
                        
                        <div className="bg-white rounded-xl card-shadow p-6">
                            <h3 className="text-lg font-semibold text-gray-800 mb-4">用户行为热力图</h3>
                            <div className="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
                                <p className="text-gray-500">🔥 热力图数据展示区域</p>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
        
        // 用户管理页面
        function UsersPage() {
            const users = [
                { id: 1, name: '系统管理员', email: 'admin@company.com', role: '管理员', status: '活跃' },
                { id: 2, name: '项目经理', email: 'manager@company.com', role: '经理', status: '活跃' },
                { id: 3, name: '开发工程师', email: 'dev@company.com', role: '开发者', status: '离线' }
            ];
            
            return (
                <div>
                    <div className="flex justify-between items-center mb-6">
                        <h2 className="text-2xl font-bold text-gray-800">用户管理</h2>
                        <button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                            添加用户
                        </button>
                    </div>
                    
                    <div className="bg-white rounded-xl card-shadow overflow-hidden">
                        <table className="w-full">
                            <thead className="bg-gray-50">
                                <tr>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">邮箱</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody className="bg-white divide-y divide-gray-200">
                                {users.map(user => (
                                    <tr key={user.id}>
                                        <td className="px-6 py-4 whitespace-nowrap">
                                            <div className="flex items-center">
                                                <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-medium">
                                                    {user.name.charAt(0)}
                                                </div>
                                                <div className="ml-4">
                                                    <div className="text-sm font-medium text-gray-900">{user.name}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {user.email}
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {user.role}
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap">
                                            <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                                                user.status === '活跃' 
                                                    ? 'bg-green-100 text-green-800' 
                                                    : 'bg-gray-100 text-gray-800'
                                            }`}>
                                                {user.status}
                                            </span>
                                        </td>
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <button className="text-blue-600 hover:text-blue-900 mr-3">编辑</button>
                                            <button className="text-red-600 hover:text-red-900">删除</button>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            );
        }
        
        // 渲染应用
        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>